<template>
  <div class="link" @click="openMiniApp">
    <div
      class="entry-img"
      :style="`--width: calc(${iconWidth}px * var(--ratio))`"
    >
      <div class="entry-badge" v-if="editing">
        <f7-badge v-if="reduce">-</f7-badge>
        <f7-badge color="blue" v-if="appplus">+</f7-badge>
      </div>
      <img
        :src="data.iconUrl"
        alt=""
        :class="[reduce || appplus ? 'img-animation' : '']"
      />
    </div>
    <p
      class="entry-title"
      :style="`font-size: calc(${fontSize}px * var(--ratio);`"
    >
      {{ data.serverName }}
    </p>
  </div>
</template>
<script>
import MiniApp from "@/libs/framework/miniapp.js"
// const MiniApp = require('@/libs/framework/miniapp.js')
export default {
  name: "qm-entry-miniapp",
  props: {
    // 我的应用已添加的数据
    myapp: {
      type: Array,
    },
    // 传递过来的数据
    data: {
      type: Object,
      default: {},
    },
    //小程序解析参数
    parmas: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 显示右上角符号
    editing: {
      type: Boolean,
      default: false,
    },
    // 右上角减号
    reduce: {
      type: Boolean,
      default: false,
    },
    // 右上角加号
    plus: {
      type: Boolean,
      default: false,
    },
    iconWidth: {
      type: String | Number,
      default: "86",
    },
    fontSize: {
      type: String | Number,
      default: "28",
    },
  },
  data() {
    return {
      list: {},
      appplus: false,
    };
  },
  inject: {
    convertUrl:{
      from:"convertUrl",
      //default:()=>{return false;}
    }
  },
  methods: {
    openMiniApp(key, id) {
      if (
        this.editing === true &&
        this.reduce === false &&
        this.appplus === false
      ) {
        return;
      } else if (this.editing === true && this.reduce === true) {
        this.$emit("delete", id);
        return;
      } else if (this.editing === true && this.appplus === true) {
        this.$emit("increase", this.data);
        return;
      } else if (this.data.serverUrl.startsWith("/")) {

        localStorage.setItem("miniapp_parmas", JSON.stringify(this.parmas));
        this.$f7.views.current.router.navigate(this.getAppLink());
      } else {
        qmSdk.openLink({
          title: this.data.serverName,
          url: this.getAppLink(),
          hidden: this.data.isTitleBar?0:1
        });
        // MiniApp.open(
        //   {
        //     appCode: this.data.serverId,
        //     appName: this.data.serverName,
        //     appLink: this.getAppLink(),
        //     preloading: this.data.preloading == 1,
        //     isLogin: this.data.isLogin == 1,
        //     cssText: this.data.cssText || "",
        //     listenResourceJs: ``,
        //     backJS: this.data.backJs || "",
        //     isTitleBar: this.data.isTitleBar == 1,
        //     publicKey: ``,
        //     privateKey: ``,
        //   },
        //   null,
        //   "white"
        // );
      }
    },
    getAppLink() {
      let url = "";
      if(this.convertUrl){
        url = this.convertUrl(this.data, this.parmas);
      }
      if(!url){
        url = this.data.serverUrl;
        if (this.data.parmas) {
          if (!this.hasParmas(url)) {
            url += "?";
          }
          let pa = JSON.parse(this.data.parmas || {});
          Object.keys(pa).forEach((key) => {
            url += `&${key}=${encodeURIComponent(this.parmas[key] || pa[key])}`;
          });
        }
      }
      //解决页面缓存问题
      url += (this.hasParmas(url)?"&":"?") + "_r=" + Math.random();
      return url;
    },
    hasParmas(url){
      let d1 = url.indexOf("?"),
            d2 = url.indexOf("#");
      return !(d1 == -1 || d2 > d1);
    }
  },
  watch: {
    myapp() {
      if (this.myapp.length >= 15) {
        this.appplus = false;
        return;
      }
      if (
        this.myapp.findIndex((r) => r.serverId === this.data.serverId) !== -1
      ) {
        this.appplus = false;
      } else {
        if (this.editing) {
          this.appplus = true;
        }
      }
    },
    plus() {
      this.appplus = this.plus;

      if (this.myapp) {
        if (
          this.myapp.findIndex((r) => r.serverId === this.data.serverId) !== -1
        ) {
          this.appplus = false;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes shake {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.img-animation {
  position: absolute;
  animation: shake 0.7s 0s linear infinite normal;
}
.link {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .entry-img {
    position: relative;
    width: 40px;
    height: 40px;
    .entry-badge {
      position: absolute;
      right: -8px;
      top: -7px;
      font-size: 16px;
    }
    img {
      width: 40px;
      height: 40px;
    }
  }
}

.entry-title {
  --height: calc(40px * var(--ratio));
  height: var(--height);
  line-height: var(--height);
  width: 90px;
  font-size: var(--font-size-subcontent);
  color: var(--color-text-title);
  text-align: center;
  margin: 0;
  margin-top: calc(15px * var(--ratio));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-word;
}

.entry-subtitle {
  --height: calc(33px * var(--ratio));
  // width: 100%;
  font-size: var(--font-size-subcontent-2);

  height: var(--height);
  line-height: var(--height);
  color: var(--color-text-subtext);
  text-align: center;
  margin: 0;
  margin-top: calc(2px * var(--ratio));

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
